<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="工艺部位">
              <a-select
                style="width: 180px"
                show-search
                placeholder="请选择工艺部位"
                v-model="partName"
                allow-clear
                @change="changePart"
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in partList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="工艺做法">
              <a-select
                style="width: 180px"
                show-search
                placeholder="请选择工艺做法"
                v-model="operName"
                allow-clear
                @change="changeOper"
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in operList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="品牌">
              <a-select
                style="width: 180px"
                show-search
                placeholder="请选择品牌"
                v-model="brandName"
                @change="changeBrand"
                allow-clear
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in brandList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="小类">
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择小类"
                v-model="xlName"
                @change="changeXl"
                allow-clear
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in xlList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                type="primary"
                style="margin-left: 10px"
                @click="add('')"
              >新建</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <div>
        <a-list
          :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 6}"
          :data-source="dataSource"
          :loading="loading"
        >
          <a-list-item
            slot="renderItem"
            slot-scope="item, index"
          >
            <a-card>
              <img
                :src="item.imgurl"
                @click="prevImg(item.imgurl)"
                style="width: 100%;height: 100px;object-fit: contain;"
              >
              <div class="cardItemContent">
                <!-- <h3>编号:{{item.code}}</h3> -->
                <p class="title">工艺部位:{{ item.partName}}</p>
                <p class="title">工艺做法:{{ item.operName }}</p>
                <p class="title">描述:{{ item.description }}</p>
              </div>
              <template
                slot="actions"
                class="ant-card-actions"
              >
                <div style="display: flex">
                  <a-button
                    type="link"
                    @click="add(item)"
                    block
                  >
                    <a-icon type="edit" />编辑
                  </a-button>
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm="deleteRecord(item)"
                  >
                    <a-button
                      type="link"
                      block
                      style="color: red"
                    >
                      <a-icon type="delete" />删除
                    </a-button>

                  </a-popconfirm>

                </div>
              </template>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
      <a-pagination
        style="display: flex;justify-content: end;"
        :pageSize="pageSize"
        :show-total="total => `共 ${total} 条`"
        :current="current"
        :total="total"
        :item-render="itemRender"
        :showQuickJumper='true'
        @change="handleTableChange"
      />
    </a-card>

    <a-card>
      <create
        v-if="showAdd"
        :content="content"
        @close="close"
      ></create>

    </a-card>
     <a-modal
      v-model="showBigImg"
      title="图片预览"
      @ok="showBigImg = false"
      :footer="null"
      width="60%"
      :mask="true"
    >
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>

    </a-modal>
  </div>
  
</template>

<script>
import create from './create.vue'
import { getList, deleteList, getDictChildList } from '@api/rd/index'
const innerColumns = [
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    dataIndex: 'description'
  }
]
const columns = [
  {
    title: '编号',
    width: 200,
    dataIndex: 'code'
  },
  {
    title: '工艺部位',
    width: 100,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 170,
    dataIndex: 'operName'
  },
  // {
  //   title: '关联属性',
  //   scopedSlots: { customRender: 'craftRelationDec' }

  // },
  {
    title: '操作',
    width: 160,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create
  },
  data() {
    return {
      columns,
      innerColumns,
      showAdd: false,
      showDetail: false,
      showBigImg:false,
      prevImageUrl:'',
      form: this.$form.createForm(this),
      loading: false,
      type: '',
      dataSource: [],
      partList: [],
      operList: [],
      xlList: [],
      brandList: [],
      dict: {},
      partName: undefined,
      partId: '',
      operName: undefined,
      operId: '',
      brandName: undefined,
      brand: '',
      xlName: undefined,
      xl: '',
      total: 0,
      current: 1,
      pageSize: 24,
      itemRender: (current, type, originalElement) => {
        if (type === 'prev') {
          return <a>上一页</a>
        } else if (type === 'next') {
          return <a>下一页</a>
        }
        return originalElement
      },
    }
  },
  mounted() {
    this.loadData()
    this.getPartList()
    this.getOperList()
    this.getBrandList()
    this.getXlList()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    close() {
      this.showAdd = false
      this.loadData(1)
    },
    add(record) {
      this.showAdd = true
      this.content = record
    },
    handleTableChange(current) {
      this.current = current
      this.loadData()
    },
    changePart(values) {
      if (values) {
        this.partList.map(item => {
          if (item.name == this.partName) {
            this.partId = item.code
          }
        })
      } else {
        this.partId = ''
      }
    },
    changeOper(values) {
      if (values) {
        this.operList.map(item => {
          if (item.name == this.operName) {
            this.operId = item.code
          }
        })
      } else {
        this.operId = ''
      }
    },
    changeBrand(values) {
      if (values) {
        this.brandList.map(item => {
          if (item.name == this.brandName) {
            this.brand = item.code
          }
        })
      } else {
        this.brand = ''
      }
    },
    changeXl(values) {
      if (values) {
        this.xlList.map(item => {
          if (item.name == this.xlName) {
            this.xl = item.code
          }
        })
      } else {
        this.xl = ''
      }
    },
    async getPartList() {
      const params = {
        name: 'GY_PART'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.partList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    async getOperList() {
      const params = {
        name: 'GY_OPER'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.operList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取做法列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取做法列表失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },
  prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取小类列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async deleteRecord(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteList('lib', params)
        if (res.code == 200) {
          this.$message.success('删除工艺库成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async loadData(key) {
      this.loading = true
      if (key) {
        this.current = 1
      }
      const params = {
        current: this.current,
        size: this.pageSize
      }
      if (this.partId) {
        params.partId = this.partId
      }
      if (this.operId) {
        params.operId = this.operId
      }
      if (this.brand) {
        params.brand = this.brand
      }
      if (this.xl) {
        params.xl = this.xl
      }
      try {
        const res = await getList('lib', params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.current = res.data.current
          this.total = res.data.total
          // this.dataSource.map((item)=>{
          //   if(item.craftRelationDec != ''){
          //      item.craftRelationDec = item.craftRelationDec.split(",")
          //   }

          // })
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺库列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺库列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.cardItemContent {
  line-height: 20px;
  margin-top: 10px;
}

.title {
  font-size: 14px;
  line-height: 28px;
  font-weight: 450;
  margin-bottom: 4px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
</style>